<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五子棋</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		.my-canvas {
			width: 500px;
			height: 500px;
			margin: 20px auto;
			display: block;
			box-shadow: 1px 2px 5px 1px rgba(1,1,1,.5);
		}
		h1 {
			font-size: 40px;
			font-family: 'Microsoft yahei';
			text-align: center;
		}
	</style>
</head>
<body>
	<img src="bg.jpg" id="myImg" style="display: none;" />
	<h1>五子棋</h1>
	<canvas id="my-canvas" class="my-canvas" width="500px" height="500px"></canvas>
	<script>

		(function() {
			var bgImg = document.getElementById("myImg");
			var canvasObj = document.querySelector("#my-canvas");
			var ctx = canvasObj.getContext("2d");
			ctx.strokeStyle = '#000';//填充绿色
			ctx.lineWidth = 1;
			
			for(var i = 0; i < 16; i++) {
				ctx.moveTo(25.5, 25.5 + i * 30);
				ctx.lineTo(475.5, 25.5 + i * 30);
				ctx.stroke();

				ctx.moveTo(25.5 + i * 30, 25.5);
				ctx.lineTo(25.5 + i * 30, 475.5);
				ctx.stroke();

				ctx.globalAlpha= 1;
			}

			bgImg.onload = function() {
				ctx.globalAlpha= (Math.sin(0) + 1) / 2;
				ctx.drawImage(bgImg, 0, 0);
			}

			function getPos(ev) {
				var x,y;
				if (ev.layerX || ev.layerX == 0) {
				　　x = ev.layerX;
				　　y = ev.layerY;
				} else if (ev.offsetX || ev.offsetX == 0) { // Opera
				　　x = ev.offsetX;
				　　y = ev.offsetY;
			　　}
			　　return {x: x, y: y};
			}

			canvasObj.onclick = function(e) {
				var pos = getPos(e);
				console.log(pos);
			}

		})();

		// console.log(bgimg);
		
		
	</script>

	<h1>矩形</h1>
	<canvas id="my-canvas-rect" class="my-canvas" width="500px" height="500px"></canvas>
	<script>
		var ctx = document.querySelector("#my-canvas-rect").getContext("2d");
		ctx.beginPath();
		var gradient = ctx.createLinearGradient(160,40,400,0);
		gradient.addColorStop(0,'red');
        gradient.addColorStop(0.5,'green');
        gradient.addColorStop(1,'blue');
		ctx.fillStyle = gradient;
		ctx.strokeRect(20.5,20.5,100,100);

		ctx.beginPath();
		ctx.fillRect(130.5,20.5,200,200);
	</script>

	<h1>圆</h1>
	<canvas id="my-canvas-arc" class="my-canvas" width="500px" height="500px"></canvas>
	<script>
	//ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
	//画圆或者圆弧。x,y为圆心坐标，radius为半径，
	//startAngle,endAngle为开始/结束划圆的角度，anticlockwise为是否逆时针画圆（True为逆时针，False为顺时针）。
		
		var ctx = document.querySelector("#my-canvas-arc").getContext("2d");
		ctx.beginPath();
		var gradient = ctx.createLinearGradient(10,10,400,0);
		gradient.addColorStop(0,'red');
        gradient.addColorStop(0.5,'green');
        gradient.addColorStop(1,'blue');
		ctx.fillStyle = gradient;
  		ctx.arc(70, 70, 60, 0 ,Math.PI / 2, true);
  		ctx.fill();
	</script>
</body>
</html>